<template>
  <div id="box" ref="box" style="width: 75%;height:348px;"></div>
</template>

<script  setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
let box = ref(null)
console.log(box)
onMounted(()=>{
  let myecharts = echarts.init(box.value);
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: 20,
      left: 100,
      icon: 'circle', // 设置为菱形形状
      data: ['总收入（元）', '总支出（元）'],
      formatter: function (name) {
        if (name === '总收入（元）') {
          return '{b|10086168}\n{a|' + name + '}'
        } else {
          return '{b|789999}\n{a|' + name + '}'
        }
      },
      textStyle: {
        rich: {
          a: {
            color: '#8f8f8f',
            fontWeight: 'bold',
            fontSize: 14
          },
          b: {
            color: '#0f0f0f',
            fontWeight: 'bold',
            fontSize: 18
          }
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false

        },
        axisLabel: {
          show: true,
          margin: 25
        },
        data: [{
          value: '一月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '二月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '三月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '四月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '五月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '六月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '七月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '八月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '九月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '十月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '十一月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }, {
          value: '十二月',
          textStyle: {
            color: 'rgb(225,94,13)'
          }
        }]
      }
    ],
    yAxis: [
      {
        show: false
      }
    ],
    series: [
      {
        name: '总收入（元）',
        type: 'bar',
        stack: 'Ad',
        itemStyle: {
          // 设置边框圆角
          borderRadius: [0, 0, 0, 0],
          color: '#e15e0d'
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
      },
      {
        name: '总支出（元）',
        type: 'bar',
        stack: 'Ad',
        itemStyle: {
          // 设置边框圆角
          borderRadius: [10, 10, 0, 0],
          color: '#ffb300'
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 150, 140, 132, 101, 134, 90, 150]
      }
    ]
  }
  // 请求统计数据，从后端请求的数据
  // let res = await getReportsList();
  // console.log(res)

  // option.legend = res.data.data.legend;  //数据的类型分类（命名）
  // option.series = res.data.data.series;  //数据
  // option.xAxis  = res.data.data.xAxis;   //x轴的种类
  // option.yAxis = res.data.data.yAxis;

  myecharts.setOption(option)
  window.onresize = function(){
    console.log('窗口大小发生改变了')
    // echarts适配
    myecharts.resize();

  }
});
</script>

<style lang="scss" scoped>
#box{
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
